<template>
  <div class="app-container">
    <sticky v-if="false" :z-index="10" :class-name="'sub-navbar '">
      <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="dialogTableVisible = true" >
        添加
      </el-button>
      <el-button v-loading="loading" type="warning" @click="backtoPreviousTags(false)">
        返回
      </el-button>
    </sticky>

    <div class="filter-container">
      <el-select v-model="listQuery.U_Code" placeholder="组编号" clearable style="width: 200px;margin-right:10px" class="filter-item">
        <el-option v-for="item in codelist" :key="item" :label="item" :value="item" />
      </el-select>
      <el-input v-if="false" placeholder="参数名称" v-model="curFilterVal" clearable style="width: 120px;margin-right:10px" class="filter-item">
      </el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-document" @click="dialogTableVisible = true">
        新增
      </el-button>
    </div>

    <el-dialog :visible.sync="dialogTableVisible" title="添加新参数">
      <el-form ref="postForm" :model="postForm" label-width="80px" style="width:400px;">
        <el-form-item label="组编号">
          <el-input v-model="postForm.U_Code"></el-input>
        </el-form-item>
        <el-form-item label="参数内容">
          <el-input v-model="postForm.U_Val"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitNewField">提交</el-button>
          <el-button @click="dialogTableVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table class='tb' v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;margin-top: 10px;">

      <el-table-column width="80px" align="center" label="编号">
        <template slot-scope="scope">
          <span>{{ scope.row.row_number }}</span>
        </template>
      </el-table-column>

      <el-table-column width="200px" align="center" label="组编号">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.U_Code" class="edit-input" size="small"/>
          </template>
          <span v-else>{{ scope.row.U_Code }}</span>
        </template>
      </el-table-column>

      <el-table-column width="200px" align="center" label="参数内容">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-input v-model="scope.row.U_Val" class="edit-input" size="small"/>
          </template>
          <span v-else>{{ scope.row.U_Val }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <el-button type="success" size="small" icon="el-icon-edit" @click="confirmEdit(scope.row)">
              确定
            </el-button>
            <el-button type="warning" size="small" icon="el-icon-edit" @click="cancelEdit(scope.row)">
              取消
            </el-button>
          </template>
          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit" >
            更新
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import { fetchBOUDLs, updateBOUDLs } from '@/api/res'
import Pagination from '@/components/Pagination'
import { unique } from '@/utils'

export default {
  name: 'DropdownList',
  components: { Pagination, Sticky },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      dialogTableVisible: false,
      postForm:{},
      total: 0,
      loading: false,
      listLoading: true,
      curFilterVal: '',
      codelist:[],
      listQuery: {
        page: 1,
        limit: 20,
        U_Code: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchBOUDLs(this.listQuery).then(res=>{
        const { page , limit, U_Code=''} = this.listQuery

        this.codelist = unique(res.map(v=>v.U_Code))

        if(U_Code != ''){
          res = res.filter(v=>v.U_Code == U_Code)
        }

        res = res.map(v=>{
          this.$set(v, 'edit', false)
          v.originalU_Code = v.U_Code
          v.originalU_Val = v.U_Val

          return v
        })

        console.log('success to get fetchBOUDLs',res)

        this.list = res.filter((item, index) => index < limit * page && index >= limit * (page - 1))
        this.total = res.length
        this.listLoading = false
      }).catch(err=>{
        this.listLoading = false
        console.log('failed to get fetchBOUDLs',err)
      })
    },

    handleFilter(){
      this.getList()
    },

    cancelEdit(row) {
      console.log('cancelEdit--0----',row)
      row.U_Code = row.originalU_Code
      row.U_Val = row.originalU_Val
      row.edit = false
    },

    confirmEdit(row) {
      console.log('confirmEdit--0----',row)

      updateBOUDLs(row).then(res=>{
        console.log('confirmEdit-updateBOUDLs-ok----', res)
        row.originalU_Code = row.U_Code
        row.originalU_Val = row.U_Val
        row.edit = false
        this.$message({ message: '操作成功', type: 'success' })
      }).catch(err=>{
        console.log('confirmEdit-updateBOUDLs-err----',err)
      })

    },

    onSubmitNewField() {
      this.dialogTableVisible = false

      var row = this.postForm
      row.U_Code = this.postForm.U_Code.trim()
      row.U_Val = this.postForm.U_Val.trim()
      row.Code = ''
      row.edit = false

      console.log('onSubmitNewField---------', row)

      updateBOUDLs(row).then(res => {
        console.log('onSubmitNewField---updateBOUDLs--ok--------', row, res)
        row.Code = res.data.data
        this.list.push(row)
        this.postForm = {'U_Code':'','U_Val':''}
        this.$message({ message: '操作成功', type: 'success' })

      }).catch(err=>{
        console.log('onSubmitNewField-updateBOUDLs-err----',err)
      })

    },

    backtoPreviousTags(reflush) {
      const title = '自定义参数清单'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.id}`
      })
      this.$store.dispatch('tagsView/delView', route).then(({
        visitedViews
      }) => {
        const latestView = visitedViews.slice(-1)[0]
        if (latestView) {
          this.$router.push(latestView.fullPath)
          if (reflush && reflush == true) {
            this.$router.go(0)
          }
        } else {
          if (view.name === 'Dashboard') {
            this.$router.replace({
              path: '/redirect' + view.fullPath
            })
          } else {
            this.$router.push('/')
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>

<style lang="scss">
  .tb{
    .el-input__inner{
      width: 180px;
      text-align: center;
    }
  }
</style>
